<template>
  <div>
    <p
      class="person"
      v-if="rowData.sex !== undefined && rowData.sex === '未知'"
    >
      <svg class="svgIcon" aria-hidden="true">
        <use xlink:href="#icon-wenhao"></use>
      </svg>
      <span>{{ data }}</span>
    </p>
    <p class="person" v-if="rowData.sex !== undefined && rowData.sex === '男'">
      <svg class="svgIcon" aria-hidden="true">
        <use xlink:href="#icon--nan"></use>
      </svg>
      <span>{{ data }}</span>
    </p>
    <p
      class="person"
      v-else-if="rowData.sex !== undefined && rowData.sex === '女'"
    >
      <svg class="svgIcon" aria-hidden="true">
        <use xlink:href="#icon--nv"></use>
      </svg>
      <span>{{ data }}</span>
    </p>
    <!-- <span v-else-if="data === undefined || rowData.sex === undefined">数据异常</span>
    <span v-else>数据不匹配该显示类型</span> -->
  </div>
</template>
<script>
export default {
  name: "dtPerson",
  props: ["data", "rowData"],
  mounted() {}
};
</script>
<style lang="less">
p.person {
  display: flex;
  align-items: center;
  .svgIcon {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
}
</style>
